<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
</head>
<body>
    <div class="parent">
        <div class="one">
            <input type="text" class="text"><input type="button" value="新建任务" class="submit">
        </div>
        <div class="two">
            <div class="left">
                <h3>未完成</h3>
            </div>


            <div class="right">
                <h3>已完成</h3>
            </div>
        </div>
    </div>
    <style>
        /* 去除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置宽度 */
        .parent {
            width: 840px;
            margin: 0 auto;
        }
        /* 设置输入框和新建的样式 */
        .one {
            height: 50px;
            padding: 20px;
        }
        /* 设置输入框样式 */
        .one .text{
            height: 50px;
            width: 600px;
        }
        /* 设置提交框样式 */
        .one .submit {
            background-color: orange;
            color: white;
            height: 50px;
            width: 196px;
            border: none;
        }
        /* 设置点击时的背景 */
        .one .submit:active{
            background-color: red;
        }
        /* 设置已完成和未完成的样式 */
        .two{
            width: 800px;
            height: 800px;
            display: flex;
            margin: 0 auto;
        }
        /* 设置未完成和已完成字体样式 */
        .two h3 {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: black;
            color: white;
        }
        /* 设置未完成左边的样式 */
        .left {
            width: 50%;
            height: 100%;
        }
        /* 设置已完成右边的样式 */
        .right {
            width: 50%;
            height: 100%;
        }
        /* 新建任务的样式 */
        .row {
            height: 50px;
            display: flex;
            align-items: center;
        }
        /* 新建任务字体的样式 */
        .row span {
            width: 340px;
        }
        /* 新建任务的删除按钮样式 */
        .row button{
            width: 40px;
            height: 40px;
        }
    </style>
    <script>
        // 首先获取新建按钮元素
        let submit = document.querySelector('.submit');
        // 设置鼠标单击事件
        submit.onclick = function() {
            // 获取输入框元素
            let text = document.querySelector('.text');
            // 判断输入框内容是否为空
            if(text.value == '') return;
            // 新建代办事项
            let row = document.createElement('div');
            row.className='row';
            let checkBox = document.createElement('input');
            checkBox.type='checkbox';
            let thing = document.createElement('span');
            thing.innerHTML = text.value;
            let del = document.createElement('button');
            del.innerHTML='删除';
            row.appendChild(checkBox);
            row.appendChild(thing);
            row.appendChild(del);
            // 获取左边元素
            let left = document.querySelector('.left');
            left.appendChild(row);
            // 添加节点之后置空
            text.value='';

            // 设置选择框的鼠标单击事件
            checkBox.onclick = function() {
                // 如果被选择了就移动已完成
                // 如果未完成就移动到未完成
                if(checkBox.checked){
                    let target = document.querySelector('.right');
                    target.appendChild(row);
                }else{
                    let target = document.q
                    uerySelector('.left');
                    target.appendChild(row);
                }
            }
            // 设置删除按钮的鼠标单击事件
            del.onclick = function() {
                // 使用 parentNode 获取到父节点
                let parent = row.parentNode;
                // 删除该节点
                parent.removeChild(row);
            }
        }
    </script>
</body>
</html>